<template>
  <div class="orderCard bgwrite">
    <div class="top">
      <div class="name fz2">{{form.name}}</div>
      <div class="content flex fz4">
        <div class="wordsGray">作图数量</div>
        <div>{{form.worksNum}}</div>
      </div>
      <!-- 待收图 待结算 已完成 已关闭 -->
      <div v-if="form.orderStatus=='5' || form.orderStatus=='6'||(form.orderStatus=='7'&&form.finishcode!='gunevaluate') || (form.orderStatus=='2'&&form.closecode!='allowance')  ">
        <div class="content flex fz4">
          <div class="wordsGray">总计时间</div>
          <div>{{form.allTime}}</div>
        </div>
        <div class="content flex fz4">
          <div class="wordsGray">预付金额</div>
          <div>{{form.advance}}</div>
        </div>
        <div class="content flex fz4">
          <div class="wordsGray">尾款金额</div>
          <div>{{form.tail}}</div>
        </div>
      </div>
      <!-- 改图的 待付款 改图进行中 待确认 -->
      <div v-else-if="form.orderStatus=='8' || form.orderStatus=='9' || form.orderStatus=='10' ||(form.orderStatus=='7'&&form.finishcode=='gunevaluate')">
        <div class="content flex fz4">
          <div class="wordsGray">要求效果</div>
          <div>{{form.require}}</div>
        </div>
        <div class="content flex fz4">
          <div class="wordsGray">所需时间</div>
          <div>{{form.needTime}}</div>
        </div>
        <div class="content flex fz4">
          <div class="wordsGray">改图报价</div>
          <div>{{form.changeMoney}}</div>
        </div>
      </div>
      <div v-else>
        <div class="content flex fz4">
          <div class="wordsGray">初次上门</div>
          <div>{{form.firstTime}}</div>
        </div>
        <div class="content flex fz4">
          <div class="wordsGray">预约日期</div>
          <div>{{form.date}}</div>
        </div>
        <div class="content flex fz4">
          <div class="wordsGray">约定地点</div>
          <div>{{form.address}}</div>
        </div>
      </div>
    </div>
    <!-- 进行中 -->
    <div v-if="form.orderStatus=='0'">
      <div class="bot flex flex-space-x">
        <!-- 计时中 -->
        <div class="botleft flex"
             v-if="form.doingCode=='timing'">
          <div class="wordsGray tit">计时</div>
          <div class="timeclock bgprimary wordsWrite fz2">00</div>
          <div class="wordsprimary dots fz2">：</div>
          <div class="timeclock bgprimary wordsWrite fz2">00</div>
          <div class="wordsprimary dots fz2">：</div>
          <div class="timeclock bgprimary wordsWrite fz2">00</div>
        </div>
        <!-- 暂停 -->
        <div class="botleft flex "
             v-if="form.doingCode=='suspend'">
          <div class="wordsGray tit">暂停</div>
          <div class="timeclock bgstart wordsWrite fz2">00</div>
          <div class=" dots1 fz2">：</div>
          <div class="timeclock bgstart wordsWrite fz2">00</div>
          <div class="dots1 fz2">：</div>
          <div class="timeclock bgstart wordsWrite fz2">00</div>
        </div>
        <!-- 用时 -->
        <div class="botleft flex"
             v-if="form.doingCode=='stop'">
          <div class="wordsGray tit">用时</div>
          <div class="timeclock bgprimary wordsWrite fz2">00</div>
          <div class="wordsprimary dots fz2">：</div>
          <div class="timeclock bgprimary wordsWrite fz2">00</div>
          <div class="wordsprimary dots fz2">：</div>
          <div class="timeclock bgprimary wordsWrite fz2">00</div>
        </div>
        <div class="botright flex"
             v-if="form.doingCode=='timing' || form.doingCode=='suspend'">
          <div class="wordsprimary fz4">查看计时详情</div>
          <div class="arrowRight">
            <img src="@/assets/img/performance/orderCard/arrowRight.png"
                 width="100%"
                 alt="">
          </div>
        </div>
        <div class="botright flex"
             v-if="form.doingCode=='stop'">
          <div class="wordsprimary fz4">超6小时80元/小时</div>
          <div class="arrowRight">
            <img src="@/assets/img/performance/orderCard/arrowRight.png"
                 width="100%"
                 alt="">
          </div>
        </div>
        <div class="rightimg">
          <img src="@/assets/img/performance/orderCard/doNow.png"
               width="100%"
               alt="">
        </div>
      </div>
    </div>
    <div v-else-if="form.orderStatus=='9'">
      <div class="bot flex flex-space-x">
        <div class="botleft wordsGray fz5 flex">改图师暂未上传</div>
        <div class="botright bgprimary  wordsWrite flex fz4">催一催</div>
        <div class="rightimg">
          <img src="@/assets/img/performance/orderCard/doNow1.png"
               width="100%"
               alt="">
        </div>
      </div>
    </div>
    <!-- 待服务 -->
    <div v-else-if="form.orderStatus=='1'">
      <div class="bot flex flex-space-x"
           v-if="form.serviceCode=='0' || form.serviceCode=='4'">
        <div class="botleft unclick wordsprimary fz4 flex">取消订单</div>
        <div class="botright flex"
             v-if="form.serviceCode=='0'">
          <div class="bgprimary wordsWrite service fz4" @click="open_popup">重选表现师 (29:59)</div>
        </div>
        <div class="botright flex"
             v-if="form.serviceCode=='4'">
          <div class="bgprimary wordsWrite service fz4">同意开启计时</div>
        </div>
      </div>
      <div class="bot flex flex-space-x"
           v-else>
        <div class="botleft  wordsGray fz4 flex"
             v-if="form.serviceCode=='1'">待表现师上门</div>
        <div class="botleft  wordsGray fz4 flex"
             v-if="form.serviceCode=='2'">已到时，对方还未到达</div>
        <div class="botleft  wordsGray fz4 flex"
             v-if="form.serviceCode=='3'">对方已签到，请等候</div>

        <div class="botright flex">
          <div class="unclick wordsprimary service fz4">取消订单</div>
        </div>
      </div>
      <div class="rightimg">
        <img src="@/assets/img/performance/orderCard/waitService.png"
             width="100%"
             alt="">
      </div>
    </div>
    <!-- 已关闭 -->
    <div v-else-if="form.orderStatus=='2'">
      <div class="bot flex flex-space-x">
        <!-- 取消订单 -->
        <div class="botleft wordsGray fz4 flex"
             v-if="form.closecode=='close'">
          您已取消订单
        </div>
        <!-- 投诉成功 -->
        <div class="botleft wordsGray fz4 flex"
             v-if="form.closecode=='complaint'">
          投诉成功，平台已退款
        </div>
        <div class="botright flex">
          <!-- 查看退款 -->
          <div class="bgprimary close wordsWrite fz4"
               v-if="form.closecode=='close'">查看退款</div>
          <!-- 查看详情 -->
          <div class="bgprimary close wordsWrite fz4"
               @click="go_detail"
               v-if="form.closecode=='complaint'">查看详情</div>
        </div>
      </div>
      <div class="rightimg">
        <img src="@/assets/img/performance/orderCard/hasClose.png"
             width="100%"
             alt="">
      </div>
    </div>

    <!-- 待收图 -->
    <div v-else-if="form.orderStatus=='3'">
      <div class="bot flex flex-space-x">
        <div class="botleft unclick wordsWrite fz4 flex">再来一单</div>
        <!-- 未上传 -->
        <div class="botright bgprimary flex wordsWrite fz4"
             v-if="form.waitDraw=='0'">对方未上传，提醒Ta</div>
        <!-- 结算收图 -->
        <div class="botright flex bgprimary wordsWrite fz4"
             v-if="form.waitDraw=='1'">结算收图</div>
      </div>
      <div class="rightimg">
        <img src="@/assets/img/performance/orderCard/waitDrawing.png"
             width="100%"
             alt="">
      </div>
    </div>
    <!-- 已完成 -->
    <div v-else-if="form.orderStatus=='4'">
      <div class="bot flex flex-space-x">
        <!-- 未评价 -->
        <div class="botleft unclick wordsprimary fz4 flex"
             v-if="form.finishcode=='0'">再来一单</div>
        <!-- 改图 -->
        <div class="botleft unclick wordsprimary fz4 flex"
             v-if="form.finishcode=='1'">请求改图</div>

        <div class="botright bgprimary flex wordsWrite fz4"
             v-if="form.finishcode=='0'">评价</div>
        <div class="botright bgprimary flex wordsWrite fz4"
             v-if="form.finishcode=='1'">追评</div>
      </div>
      <div class="rightimg">
        <img src="@/assets/img/performance/orderCard/finished.png"
             width="100%"
             alt="">
      </div>
    </div>
    <!-- 待改图 -->
    <div v-else-if="form.orderStatus=='5'">
      <div class="bot flex flex-space-x">
      
        <div class="botleft wordsGray fz4 flex">改图师到位，付款改图 </div>
      
        <div class="botright bgprimary wordsWrite flex fz4">需支付 ¥1,500</div>
      </div>
      <div class="rightimg">
        <img src="@/assets/img/performance/orderCard/waitDraw.png"
             width="100%"
             alt="">
      </div>
    </div>
   
    <!-- 待确认 -->
    <div v-else-if="form.orderStatus=='6'">
      <div class="bot flex flex-space-x">
        <div class="botleft wordsGray fz4 flex">图已上传，1天自动确认</div>
        <div class="botright bgprimary flex wordsWrite fz4">确认收图</div>
      </div>
      <div class="rightimg">
        <img src="@/assets/img/performance/orderCard/waitConfirm.png"
             width="100%"
             alt="">
      </div>
    </div>
    <div class="msg">
      <div class="dot">
        <img src="@/assets/img/performance/orderCard/dot.png"
             width="100%"
             alt="">
      </div>
      <img src="@/assets/img/performance/orderCard/itemMsg.png"
           width="100%"
           alt="">
    </div>
  </div>
</template>

<script>
import main from './orderCard'
export default main
</script>


<style lang="scss" scoped>
@import './orderCard.scss';
</style>
